<template>
  <div class="activeCon">

    <main-layout >
      <articleCon-top :info="info"></articleCon-top>
      <div class="active-box">
<!--        图片-->
        <el-image
            style="width: 100% ; height: 15rem"
            :src="article_top"
            fit="cover"></el-image>

<!--        文章内容-->
        <article-content class="active-text" :content="content"></article-content>



      </div>

    </main-layout>
  </div>
</template>

<script>
import {getArticleContent,getInfArticle} from "@/api/article/article"
import article_top from "/public/carousel/article-top.jpg"
import articleConTop from "./components/articleCon-top";
export default {
  name: "articleCon",
  data(){
    return{
      article_top,
      id:this.$route.params.id,
      content:'',
      info:'',
    }
  },
  components:{
    'articleCon-top':articleConTop,
  },
  created() {

    let params={articleConId:Number(this.id)}

    getInfArticle(params).then(res=>{
      this.info=res.data.data.body
    })


    getArticleContent(params).then(res=>{
      this.content=res.data.data.body
    })
  },
  methods:{

  },
}
</script>

<style scoped lang="scss">
.activeCon{
  ::v-deep .main_layout_left{
    //padding: 20px;
    background-color: #F1F3F4;
  }
  ::v-deep .el-image{
    border-radius: 10px 10px 0 0;
  }
  .active-box{
    margin: 20px;
    background-color: #ffffff;
    border-radius: 10px;
  }
}
</style>
